<template>
  <div class="wn-input-table">
    <el-form-item :rules="item.rule" :label="item.label" :prop="item.prop">
      <el-input
        readonly="readonly"
        @focus="inputFocus"
        @onclick="inputFocus"
        ref="myInputTable"
        v-model="tempTxt"
      />
      <!--<el-button class="my-button" readonly="readonly" @focus="inputFocus" @click="inputFocus" ref="myInputTable">{{tempTxt}}</el-button>-->
      <div
        class="my-mask "
        :class="{ 'my-mask-show': isShow, 'my-mask-hidden': !isShow }"
        ref="myMask"
      >
        <div class="my-table" ref="myMaskInnerScrollbar" @click="myTableClick">
          <com-search
            ref="mySearch"
            v-if="item.searcher && item.searcher.config"
            :config="item.searcher.config"
            :formData="item.searcher.formData"
            :buttons="item.searcher.buttons"
            :searchLayoutParam="item.searcher.searchLayoutParam"
          />
          <!--:hideButton="true"-->

          <com-table
            ref="table"
            :data="item.tableData"
            :options="item.options"
          ></com-table>
          <div class="btns">
            <el-button size="medium" @click="cancel">取消</el-button>
            <el-button size="medium" type="primary" @click="savePlan"
              >保存</el-button
            >
          </div>
        </div>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import _ from "lodash";
import Scrollbar from "../../utils/Scrollbar";

export default {
  name: "inputTableCom",
  props: {
    maxHeight: {
      type: Number,
      default: () => {
        return 400;
      }
    },
    searcher: {
      type: Object,
      default: () => {
        return {};
      }
    },
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      isShow: false,
      tempTxt: ""
    };
  },
  methods: {
    inputFocus() {
      const maskInnerHeight = this.$refs.myMaskInnerScrollbar.offsetHeight;
      const myHeight =
        maskInnerHeight > this.item.maxHeight
          ? this.item.maxHeight
          : maskInnerHeight;
      this.$refs.myMask.style.height = myHeight + "px";
      this.isShow = !this.isShow;
      const myWidth = isNaN(this.item.width)
        ? this.item.width
        : this.item.width + "px";
      this.$refs.myMask.style.width = myWidth;
      let scrollbar = (this.scrollbar = new Scrollbar(this.$refs.myMask));
      scrollbar.show();
    },
    cancel() {
      this.isShow = false;
      this.$refs.myMask.style.height = "0";
    },
    savePlan() {
      let selection = this.$refs.table.multipleSelection;
      if (selection.length && selection.length > 0) {
        this.tempTxt = "已选" + selection.length + "项";
        this.formData[this.item.prop] = _.trimStart(
          this.$refs.table.multipleSelection.map(res => res[this.item.key])
        );
        this.isShow = false;
      } else {
        // this.$message({message: '请选择要保存的项', type: 'warning'});
      }
      this.isShow = false;
      this.$refs.myMask.style.height = "0";
    },
    myTableClick(e) {
      e && e.preventDefault && e.preventDefault();
      e && e.stopPropagation && e.stopPropagation();
    }
  }
};
</script>

<style scoped lang="scss">
.wn-input-table {
  .btns {
    padding: 16px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    background-color: white;
  }
  .my-mask {
    position: relative;
    top: 10px;
    left: 0px;
    overflow: hidden;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .my-mask-hidden {
    height: 0;
    border: 0;
    /*-webkit-transition: all .4s ease;*/
    /*transition: all .4s ease;*/
  }
  .my-mask-show {
    border: 1px solid #e4e7ed;
    animation: animate 0.5s ease;
    /*-webkit-transition: all .4s ease;*/
    /*transition: all .4s ease;*/
  }
  @keyframes animate {
    from {
      height: 0px;
    }
  }

  .my-table {
    position: absolute;
    padding: 10px;
    width: 100%;
    color: #606266;
    background: #fff;
    border-radius: 4px;
  }

  ::v-deep .com-table-win {
    margin: 0;
  }
  ::v-deep .itemStyle .el-form-item__label {
    width: auto !important;
  }
}
</style>
